<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>读者留言</title>
    <link rel="stylesheet" href="../../static/layui/css/layui.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
    <script type="text/javascript"
            src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../../static/markdown/marked.min.js"></script>
    <style>
        body {
            background-color: #e1e1e1;
        }

        .alert {
            position: relative;
            padding: .75rem 1.25rem;
            margin-bottom: 1rem;
            border: 1px solid transparent;
            border-radius: .25rem
        }

        .close {
            position: absolute;
            top: 0;
            right: 0;
            padding: .75rem 1.25rem;
            color: inherit
        }

        .alert-warning {
            color: #856404;
            background-color: #fff3cd;
            border-color: #ffeeba
        }

        .close {
            float: right;
            font-size: 1.5rem;
            font-weight: 700;
            line-height: 1;
            color: #000;
            text-shadow: 0 1px 0 #fff;
            opacity: .5
        }

        .close:focus, .close:hover {
            color: #000;
            text-decoration: none;
            opacity: .75
        }

        .close:not(:disabled):not(.disabled) {
            cursor: pointer
        }

        button.close {
            padding: 0;
            background-color: transparent;
            border: 0;
            -webkit-appearance: none
        }

        .close {
            padding: 1rem;
            margin: -1rem -1rem -1rem auto
        }

        .alert-dismissible .close {
            position: absolute;
            top: 0;
            right: 0;
            padding: .75rem 1.25rem;
            color: inherit
        }

        .height-light {
            background-color: #009688;
        }

        .layui-layout-admin .layui-logo {
            font-size: 24px;
            transition: all 0.5s;
        }

        .layui-layout-admin .layui-logo:hover {
            font-size: 40px;

            img {
                width: 30px;
            }
        }

        .layui-layout-admin .layui-logo img {
            width: 15px;
            margin-left: 5px;
            margin-top: 10px;
            transition: all 0.5s;
        }

        .layui-layout-admin .layui-body {
            top: 120px;
            right: 200px;
        }

        .layui-layout-admin .layui-footer {
            left: 0;
            right: 0;
            text-align: center;
            background-color: #ffffff;
        }

        .title {
            position: absolute;
            top: 10px;
            left: 45%;
            text-decoration-line: underline;
        }

        .container {
            position: fixed;
            bottom: 110px;
            left: 280px;
            right: 400px;
            width: calc(100% - 600px);
            height: 10px;
            margin: 0;
            padding: 10px;
            background-color: #f1f1f1;
            border-radius: 5px;
            overflow-y: scroll;
        }

        .container > * {
            margin-bottom: 10px; /* 设置元素之间的外边距 */
            font-size: 16px;
        }

        /* 最后一个元素不设置右侧外边距 */
        .container > *:last-child {
            margin-bottom: 0;
        }

        .input-box {
            display: flex;
            padding: 10px 15px;
        }

        .input-box2 {
            display: flex;
            padding: 10px 15px;
        }

        .input {
            display: flex;
            width: 100%;
            transition: all 1s;
            flex-direction: column;
            margin-left: 10px;
            padding: 2px;
            border: 1px solid #f1f1f1;
            border-radius: 10px;
            background-color: #f1f1f1;
        }

        .input2 {
            display: flex;
            width: 100%;
            transition: all 1s;
            flex-direction: column;
            margin-left: 10px;
            padding: 2px;
            border: 1px solid #f1f1f1;
            border-radius: 10px;
            background-color: #f1f1f1;
        }

        .input-box a span {
            width: 60px;
            height: 60px;
            display: block;
            background-size: cover;
            border-radius: 50%;
        }

        .input-box2 a span {
            width: 60px;
            height: 60px;
            display: block;
            background-size: cover;
            border-radius: 50%;
        }

        #textInput {
            display: block;
            height: fit-content;
            width: calc(100% - 8px);
            border: 0;
            border-radius: 10px;
            font-size: 16px;
            padding: 4px 4px;
            resize: none;
        }

        #textInput2 {
            display: block;
            height: fit-content;
            width: calc(100% - 8px);
            border: 0;
            border-radius: 10px;
            font-size: 16px;
            padding: 4px 4px;
            resize: none;
        }

        .submit {
            display: flex;
            flex-direction: row;
            height: 30px;
            border-radius: 50%;
            font-size: 14px;
            transition: all 1s;
            padding: 4px 4px;
            justify-content: space-between;
        }

        .submit2 {
            display: flex;
            flex-direction: row;
            height: 30px;
            border-radius: 50%;
            font-size: 14px;
            transition: all 1s;
            padding: 4px 4px;
            justify-content: space-between;
        }

        .submit div {
            font-size: 12px;
            margin: auto 0;
        }

        .submit2 div {
            font-size: 12px;
            margin: auto 0;
        }

        .submit input {
            font-size: 12px;
            font-weight: bold;
            width: 60px;
            height: min-content;
            margin: auto 0;
            padding: 4px 0;
            border: 0;
            border-radius: 10px;
            background-color: #e1e1e1;
            pointer-events: none;
            cursor: none;
        }

        .submit2 input {
            font-size: 12px;
            font-weight: bold;
            width: 60px;
            height: min-content;
            margin: auto 0;
            padding: 4px 0;
            border: 0;
            border-radius: 10px;
            background-color: #e1e1e1;
            pointer-events: none;
            cursor: none;
        }

        .submit.enable input {
            color: #f1f1f1;
            background-color: rgb(86, 199, 255);
            pointer-events: all;
            cursor: pointer;
        }

        .submit2.enable input {
            color: #f1f1f1;
            background-color: rgb(86, 199, 255);
            pointer-events: all;
            cursor: pointer;
        }

        code {
            border-radius: 10px;
            margin: 5px 15px;
        }

        .container-body {
            background-color: #ffffff;
            border-radius: 10px;
            padding-right: 10px;
            overflow-x: hidden;
        }

        .container-body ul {
            padding-left: 0;
            padding-right: 0;
            display: block;
        }

        .container-body ul li {
            padding: 10px 15px;
            width: 100%;
            height: fit-content;
            float: none;
            list-style-type: none;
            border-top: 1px solid rgba(0, 0, 0, 0.3);
            border-bottom: 1px solid rgba(0, 0, 0, 0.3);
            display: flex;
            justify-items: left;
        }

        .container-body ul li div p {
            margin-right: 20px;
        }

        .container-body ul li a {
            cursor: pointer;
        }

        .container-body ul li a span {
            width: 50px;
            height: 50px;
            display: block;
            background-size: cover;
            border-radius: 50%;
        }

        .comment-name {
            font-size: 14px;
            color: #0f7ddb;
            font-weight: bold;
            padding: 10px 15px;
            cursor: pointer;
        }

        .comment {
            font-size: 18px;
            padding: 10px 15px;
            border-radius: 10px;
        }

        .operator {
            font-size: 12px;
            font-weight: bold;
            padding: 5px 0 0 5px;
        }

        .operator a {
            color: rgba(143, 156, 163);
            margin-right: 10px;
            cursor: pointer;
        }

        .operator a:hover {
            color: #0C0C0C;
        }

        .my-comment {
            position: relative;
            text-align: left;
            left: 0;
            margin: 0 auto 0 0;
        }

        /*.my-comment:after {*/
        /*    content: "○";*/
        /*    position: absolute;*/
        /*    right: -15px;*/
        /*    bottom: 0;*/
        /*    font-size: 20px;*/
        /*}*/

        .others-comment {
            position: relative;
            text-align: left;
            left: 0;
            margin: 0 auto 0 0;
        }

        /*.others-comment:before {*/
        /*    content: "○";*/
        /*    position: absolute;*/
        /*    left: -15px;*/
        /*    bottom: 0;*/
        /*    font-size: 20px;*/
        /*}*/

        .solved-comment {
            background-color: rgb(240, 255, 246);
        }

        .solved-comment:hover {
            filter: brightness(1.2);
        }

        .unsolved-comment {
            background-color: rgba(255, 181, 176, 0.5);
        }

        .unsolved-comment:hover {
            filter: brightness(1.2);
        }

        .dialog-box {
            display: block;
            position: absolute;
            z-index: 10000;
            right: -500px;
            top: 20%;
            transition: all 1s;
        }

        .comment-name.comment-admin {
            color: rgba(255, 47, 47, 0.77);
        }

        .blur-effect {
            filter: blur(5px); /* 使用模糊效果 */
        }

        .blur-effect-dark {
            background-color: #FFFFFF;
            filter: blur(1px) brightness(90%); /* 使用模糊效果,亮度降低 */
        }


        /* 自定义滚动条的整体样式 */
        ::-webkit-scrollbar {
            width: 6px; /* 设置滚动条的宽度 */
        }

        /* 自定义滚动轨迹的样式 */
        ::-webkit-scrollbar-track {
            background: #f1f1f1; /* 设置滚动轨迹的背景颜色 */
        }

        /* 自定义滚动滑块的样式 */
        ::-webkit-scrollbar-thumb {
            background: #888; /* 设置滚动滑块的背景颜色 */
            border-radius: 3px; /* 滚动条圆角 */
        }

        /* 当鼠标悬停在滚动滑块上时的样式 */
        ::-webkit-scrollbar-thumb:hover {
            background: #555; /* 设置鼠标悬停时滚动滑块的背景颜色 */
        }
    </style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <a href="{{ url_for('index_student') }}">
            <div class="layui-logo">图书<img src="../static/logo.png"></div>
        </a>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:">
                    <img src="../../static/avatar/{{avatar}}.png" class="layui-nav-img">
                    <span id="name">{{ name }}</span>
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="{{ url_for('user_info_student', id=current_user.card_id) }}">个人信息</a></dd>
                    <dd><a href="{{ url_for('change_password_student') }}">修改密码</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="{{ url_for('logout') }}">退出登录</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li id="li_1" class="layui-nav-item">
                    <a class="" href="javascript:">图书管理</a>
                    <dl class="layui-nav-child">
                        <dd id="li_1_1"><a href="{{ url_for('storage') }}">入库管理</a></dd>
                        <dd id="li_1_2"><a href="{{ url_for('borrow_admin') }}">学生借书</a></dd>
                        <dd id="li_1_3"><a href="{{ url_for('return_book_admin') }}">学生还书</a></dd>
                        <dd id="li_1_4"><a href="{{url_for('write_off') }}">图书注销</a></dd>
                    </dl>
                </li>
                <li id="li_2" class="layui-nav-item">
                    <a href="{{ url_for('change_info_admin') }}">管理员信息设置</a>
                </li>
                <li id="li_3" class="layui-nav-item">
                    <a href="{{ url_for('search_book_admin') }}">图书信息查询</a>
                </li>
                <li id="li_4" class="layui-nav-item">
                    <a href="{{ url_for('search_student') }}">学生信息查询</a>
                </li>
                </li>
                <li id="li_5" class="layui-nav-item">
                    <a href="{{url_for('announcement_admin')}}">发布公告</a>
                </li>
                <li id="li_6" class="layui-nav-item">
                    <a href="{{url_for('comments_admin') }}">读者留言</a>
                </li>
            </ul>
        </div>
    </div>

    <div class="container" id="container">
        <div class="title">
            <h2>留言板</h2>
        </div>

        <div class="container-body">
            <ul>
                {% for comment in comments %}
                {% if comment.status == 0 and comment.student_id == id %}
                <li>
                    <!--头像-->
                    <a><span style="background-image: url('../../static/avatar/{{comment.student_id}}.png')"></span>
                    </a>
                    <!--评论主体-->
                    <div class="comment-main">
                        <!--名称-->
                        {% if comment.student_id|length == 6 %}
                        <p class="comment-name comment-admin">{{comment.student_name}}</p>
                        {% else %}
                        <p class="comment-name">{{comment.student_name}}</p>
                        {% endif %}
                        <!--评论-->
                        <p id={{comment.id}} class="my-comment unsolved-comment comment"
                           >
                            {{comment.comment}}
                        </p>
                        <!--操作按钮-->
                        <div class="operator">
                            <p class="date">{{comment.date}}</p>
                            <a onclick="reply(this,{{comment.id}})">回复</a>
                            <a onclick="deleted({{comment.id}})">删除</a>
                            <a onclick="solved({{comment.id}})">solved</a>
                        </div>
                    </div>
                </li>
                {% elif comment.status == 1 and comment.student_id == id %}
                <li>
                    <!--头像-->
                    <a><span style="background-image: url('../../static/avatar/{{comment.student_id}}.png')"></span>
                    </a>
                    <!--评论主体-->
                    <div class="comment-main">
                        <!--名称-->
                        {% if comment.student_id|length == 6 %}
                        <p class="comment-name comment-admin">{{comment.student_name}}</p>
                        {% else %}
                        <p class="comment-name">{{comment.student_name}}</p>
                        {% endif %}
                        <!--评论-->
                        <p id={{comment.id}} class="my-comment solved-comment comment"
                           >
                            {{comment.comment}}
                        </p>
                        <!--操作按钮-->
                        <div class="operator">
                            <p class="date">{{comment.date}}</p>
                            <a onclick="reply(this,{{comment.id}})">回复</a>
                            <a onclick="deleted({{comment.id}})">删除</a>
                        </div>
                    </div>
                </li>
                {% elif comment.status == 0 and comment.student_id != id %}
                <li>
                    <!--头像-->
                    <a><span style="background-image: url('../../static/avatar/{{comment.student_id}}.png')"></span>
                    </a>
                    <!--评论主体-->
                    <div class="comment-main">
                        <!--名称-->
                        {% if comment.student_id|length == 6 %}
                        <p class="comment-name comment-admin">{{comment.student_name}}</p>
                        {% else %}
                        <p class="comment-name">{{comment.student_name}}</p>
                        {% endif %}
                        <!--评论-->
                        <p id={{comment.id}} class="others-comment unsolved-comment comment"
                           >{{comment.comment}}
                        </p>
                        <!--操作按钮-->
                        <div class="operator">
                            <p class="date">{{comment.date}}</p>
                            <a onclick="reply(this,{{comment.id}})">回复</a>
                            <a onclick="deleted({{comment.id}})">删除</a>
                            <a onclick="solved({{comment.id}})">solved</a>
                        </div>
                    </div>
                </li>
                {% else %}
                <li>
                    <!--头像-->
                    <a><span style="background-image: url('../../static/avatar/{{comment.student_id}}.png')"></span>
                    </a>
                    <!--评论主体-->
                    <div class="comment-main">
                        <!--名称-->
                        {% if comment.student_id|length == 6 %}
                        <p class="comment-name comment-admin">{{comment.student_name}}</p>
                        {% else %}
                        <p class="comment-name">{{comment.student_name}}</p>
                        {% endif %}
                        <!--评论-->
                        <p id={{comment.id}} class="others-comment solved-comment comment"
                           >{{comment.comment}}
                        </p>
                        <!--操作按钮-->
                        <div class="operator">
                            <p class="date">{{comment.date}}</p>
                            <a onclick="reply(this,{{comment.id}})">回复</a>
                            <a onclick="deleted({{comment.id}})">删除</a>
                        </div>
                    </div>
                </li>
                {% endif %}
                {% endfor %}
            </ul>
            <div class="input-box">
                <a><span style="background-image: url('../../static/avatar/{{avatar}}.png')"></span></a>
                <div class="input">
                    <textarea type="textarea" id="textInput" placeholder="在这里评论"></textarea>
                    <div class="submit">
                        <div>按回车发送。使用 Shift+Enter 换行。</div>
                        <input type="button" value="发表" onclick="comment()"/>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <input id="id" hidden="hidden" value={{id}}>

    <div class="layui-footer">
        Copyright 2024 Construct
    </div>

    <canvas id="side-canvas"></canvas>

</div>
<script type="text/javascript" src="../../static/layui/layui.js"></script>
<script type="text/javascript" src="../../static/js/particle-animation.js"></script>
<script>
    layui.use('element', function () {
        var element = layui.element;
        element.init();
    });
</script>
<script>
    layui.use('element', function () {
        var element = layui.element;
        element.init();
    });

    $(document).ready(function () {
        $("#li_6").addClass("height-light");
        $("#container").css({
            'position': 'fixed',
            'top': '60px',
            'left': '400px',
            'width': 'calc(100% -600px)',
            'height': ($(window).height() - 124).toString() + "px",
            'margin': '0',
            'padding': '10px',
            'background-color': '#f1f1f1',
            'border-radius': '0',
        });
        $('.date').each(function () {
            let timestamp = $(this).text(); // 获取时间戳文本
            let convertedDate = timestampToDate(timestamp); // 转换时间戳
            $(this).text(convertedDate); // 更新元素文本为转换后的日期
        });
        $("#textInput").on('input', function () {
            if (this.scrollHeight > this.clientHeight) {
                this.style.height = this.scrollHeight + 'px';
            } else {
                this.style.height = "auto";
                this.style.height = this.scrollHeight + 'px';
            }
            document.getElementById("container").scrollTop = document.getElementById("container").scrollHeight;
            if (this.value.length > 0) {
                document.querySelector(".submit").classList.add("enable");
            } else {
                document.querySelector(".submit").classList.remove("enable");
            }
        });

        document.getElementById("container").scrollTop = document.getElementById("container").scrollHeight;

        /* 获取留言下评论 */
        for (let i = 1; i <= {{last_comment_id}}; i++)
        {
            let p_comment = document.getElementById(i.toString());
            if (p_comment !== null) {
                let comment_main = p_comment.parentElement;
                getCommentComments(i.toString(),comment_main);
            }
        }
    });

    function comment() {
        let student_id = $("#id").val();
        let name = document.getElementById("name");
        let comment_content = $('#textInput').val();
        console.log(comment_content);
        fetch('http://localhost:5000/student/comment/add', {
            method: 'post',
            headers: {'Content-Type': 'text/plain'},
            body: JSON.stringify({
                "id": student_id,
                "name": name.textContent,
                "comment": comment_content
            })
        }).then(response => {
            console.log(response);
            return response.body;
        }).then(body => {
            const reader = body.getReader();
            const decoder = new TextDecoder();
            reader.read().then(({done, value}) => {
                if (done) { // 读取完成
                    return;
                }
                let data = decoder.decode(value, {stream: true});
                console.log(data);
                if (JSON.parse(data).code === 200) {
                    // 留言成功
                    window.location.reload();
                }
            });
        }).catch(error => {
            console.error('发生错误:', error);
        });
    }

    /* 时间戳转换年月日 */
    function timestampToDate(timestamp) {
        const date = new Date(Number.parseFloat(timestamp));
        const year = date.getFullYear();
        const month = date.getMonth() + 1; // 月份是从0开始的，所以需要+1
        const day = date.getDate();

        return `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`;
    }

    function solved(id) {
        fetch('http://localhost:5000/admin/comment/solved', {
            method: 'post',
            headers: {'Content-Type': 'text/plain'},
            body: JSON.stringify({
                "comment_id": id
            })
        }).then(response => {
            console.log(response);
            return response.body;
        }).then(body => {
            const reader = body.getReader();
            const decoder = new TextDecoder();
            reader.read().then(({done, value}) => {
                if (done) { // 读取完成
                    return;
                }
                let data = decoder.decode(value, {stream: true});
                console.log(data);
                if (JSON.parse(data).code === 200) {
                    //
                    document.getElementById(id).classList.remove("unsolved-comment");
                    document.getElementById(id).classList.add("solved-comment");
                }
            });
        }).catch(error => {
            console.error('发生错误:', error);
        });
    }

    function deleted(id) {
        layui.use('layer', function () {
            var layer = layui.layer;
            layer.confirm('确定删除这个留言吗？', {icon: 0, title: '警告'}, function (index) {
                fetch('http://localhost:5000/admin/comment/deleted', {
                    method: 'post',
                    headers: {'Content-Type': 'text/plain'},
                    body: JSON.stringify({
                        "comment_id": id
                    })
                }).then(response => {
                    console.log(response);
                    return response.body;
                }).then(body => {
                    const reader = body.getReader();
                    const decoder = new TextDecoder();
                    reader.read().then(({done, value}) => {
                        if (done) { // 读取完成
                            return;
                        }
                        let data = decoder.decode(value, {stream: true});
                        console.log(data);
                        if (JSON.parse(data).code === 200) {
                            //
                            window.location.reload();
                        }
                    });
                }).catch(error => {
                    console.error('发生错误:', error);
                });
                layer.close(index);
            });
        });
    }

    function getCommentComments(comment_id,element) {
        fetch('http://localhost:5000/admin/comment/get', {
            method: 'post',
            headers: {'Content-Type': 'text/plain'},
            body: JSON.stringify({
                "id": comment_id,
            })
        }).then(response => {
            return response.body;
        }).then(body => {
            const reader = body.getReader();
            const decoder = new TextDecoder();
            reader.read().then(({done, value}) => {
                if (done) { // 读取完成
                    return;
                }
                let data = decoder.decode(value, {stream: true});
                let comments = JSON.parse(data).comments;
                let ul = document.createElement('ul');
                for (const comment of comments) {
                    let li = document.createElement('li');
                    let name = comment.name;
                    let comment_text = comment.comment;
                    let date = timestampToDate(comment.date);
                    let id;
                    let isAdmin = true;
                    id = comment.admin_id;
                    if (id === undefined || id === null) {
                        id = comment.student_id;
                        isAdmin = false;
                    }
                    // 头像
                    let a = document.createElement("a");
                    let span = document.createElement("span");
                    span.style.backgroundImage = "url('../../static/avatar/@id.png')".replace("@id",id);
                    span.style.width = "50px";
                    span.style.height = "50px";
                    span.style.display = "block";
                    span.style.backgroundSize = "cover";
                    span.style.borderRadius = "50%";
                    a.appendChild(span);
                    li.appendChild(a);
                    // 评论主体
                    let div = document.createElement("div");
                    let p_name = document.createElement("p");
                    let p_comment = document.createElement("p");
                    let p_date = document.createElement("p");
                    p_name.textContent = name;
                    p_name.style.color = "#0f7ddb";
                    if (isAdmin) {
                        p_name.style.color = "rgba(255, 47, 47, 0.77)";
                    }
                    p_name.style.fontSize = "12px";
                    p_name.style.fontWeight = "bold";
                    p_name.style.padding = "10px 15px";
                    p_name.style.cursor = "pointer";
                    p_comment.textContent = comment_text;
                    p_comment.style.fontSize = "18px";
                    p_comment.style.padding = "10px 15px";
                    p_comment.style.borderRadius = "10px";
                    p_comment.style.backgroundColor = "#f1f1f1";
                    p_date.textContent = date;
                    p_date.style.marginRight = "20px";
                    p_date.style.fontSize = "12px";
                    p_date.style.fontWeight = "bold";
                    div.appendChild(p_name);
                    div.appendChild(p_comment);
                    div.appendChild(p_date);
                    li.appendChild(div);
                    li.style.border = "0";
                    li.style.borderLeft = "1px solid rgba(0, 0, 0, 0.3)";
                    li.style.display = "flex";
                    ul.appendChild(li);
                }
                element.appendChild(ul);
                document.getElementById("container").scrollTop = document.getElementById("container").scrollHeight;
            });
        }).catch(error => {
            console.error('发生错误:', error);
        });
    }

    function onReply(id) {
        let comment_id = id;
        let admin_id = $("#id").val();
        let name = document.getElementById("name");
        let comment_content = $('#textInput2').val();
        console.log(comment_content);
        fetch('http://localhost:5000/admin/reply/add', {
            method: 'post',
            headers: {'Content-Type': 'text/plain'},
            body: JSON.stringify({
                "comment_id": comment_id,
                "admin_id": admin_id,
                'name': name.textContent,
                "comment": comment_content
            })
        }).then(response => {
            console.log(response);
            return response.body;
        }).then(body => {
            const reader = body.getReader();
            const decoder = new TextDecoder();
            reader.read().then(({done, value}) => {
                if (done) { // 读取完成
                    return;
                }
                let data = decoder.decode(value, {stream: true});
                console.log(data);
                if (JSON.parse(data).code === 200) {
                    // 留言成功
                    window.location.reload();
                }
            });
        }).catch(error => {
            console.error('发生错误:', error);
        });
    }

    /* 回复留言 */
    function reply(element,id) {
        // 找两次父节点
        let comment_main = element.parentElement.parentElement;
        // 存在已经打开的则清除
        try {
            let old = document.getElementById("reply-input-box");
            if (old !== null) {
                comment_main.removeChild(old);
                return;
            }
        } catch (error) {
        }
        let input_box = document.createElement("div");
        input_box.classList.add("input-box2");
        input_box.id = "reply-input-box";
        let input = document.createElement("div");
        input.classList.add("input2");
        let text_input = document.createElement("textarea");
        text_input.id = "textInput2";
        text_input.placeholder = "在这里评论";
        let submit = document.createElement("div");
        submit.classList.add("submit2");
        let div = document.createElement("div");
        div.textContent = "按回车发送。使用 Shift+Enter 换行。";
        let button = document.createElement("input");
        button.type = "button";
        button.value= "发表";
        button.addEventListener('click', function () {
            onReply(id);
        });
        submit.appendChild(div);
        submit.appendChild(button);
        input.appendChild(text_input);
        input.appendChild(submit);
        input_box.appendChild(input);
        comment_main.appendChild(input_box);

        let textInput2 = $("#textInput2");
        textInput2.on('input', function () {
            if (this.scrollHeight > this.clientHeight) {
                this.style.height = this.scrollHeight + 'px';
            } else {
                this.style.height = "auto";
                this.style.height = this.scrollHeight + 'px';
            }
            if (this.value.length > 0) {
                document.querySelector(".submit2").classList.add("enable");
            } else {
                document.querySelector(".submit2").classList.remove("enable");
            }
        });
        textInput2.keydown(function(event) {
            if (event.shiftKey && event.keyCode === 13) {
            } else {
                if (event.keyCode === 13) {
                    onReply(id);
                }
            }
        });
    }
</script>
</body>
</html>
